import 'package:flutter/material.dart';

import '../values/MyColors.dart';

/**
 * @Description: 渐变button
 * @Author: 下雨了
 * @CreateDate: 2021-10-19 13:25
 * @UpdateUser: 更新者
 * @UpdateDate:  2021-10-19 13:25
 * @UpdateRemark: 更新说明
 * @Version: 1.0
 */
///
class LinearGradientButton extends StatefulWidget {
  final bool direction; // true 上下  false 左右
  final double height; // 宽高
  final double width;
  final String text; // 按钮文字
  final double marginLeft; // 左右外边框
  final double marginRight;
  final Color beginGradientColor; //  开始渐变的颜色
  final Color endGradientColor; // 结束颜色

  final double borderRadius; // 边框圆角
  final Color shadowColor; // 阴影颜色
  final double offsetX; // x、y轴阴影大小
  final double offsetY;
  final double blurRadius; // 阴影的虚化效果大小
  final double paddingLeft; // 上下左右的内边框
  final double paddingTop;
  final double paddingRight;
  final double paddingBottom;
  final Color textColor; // 按钮文字颜色
  final double textSize; // 按钮文字大小
  final FontWeight fontWeight; // 字体粗细
  final VoidCallback onPressed;

  LinearGradientButton({
    required this.onPressed,
    // 默认值
    this.direction = true,
    this.height = 30.0,
    this.width = 100.0,
    this.text = "登录",
    this.marginLeft = 0.0,
    this.marginRight = 0.0,
    this.beginGradientColor = const Color(0xffF3DBB6),
    this.endGradientColor = const Color(0xffCBA76D),
    this.borderRadius = 3.0,
    this.shadowColor = const Color.fromRGBO(128, 128, 128, 1.0),
    this.offsetX = 2.0,
    this.offsetY = 2.0,
    this.blurRadius = 4.0,
    this.paddingLeft = 0.0,
    this.paddingTop = 0.0,
    this.paddingRight = 0.0,
    this.paddingBottom = 0.0,
    this.textColor = const Color.fromRGBO(255, 255, 255, 1.0),
    this.textSize = 14.0,
    this.fontWeight = FontWeight.w600, 
  }) :super(
  );

  @override
  _LinearGradientButtonState createState() => _LinearGradientButtonState();
}

class _LinearGradientButtonState extends State<LinearGradientButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height,
      width: widget.width,
      // 两端的间隔 marginLeft、marginRight
      margin: EdgeInsets.fromLTRB(widget.marginLeft, 0.0, widget.marginRight, 0.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: widget.direction ? Alignment.topCenter : Alignment.centerLeft,
            end: widget.direction ? Alignment.bottomCenter : Alignment.centerRight,
            colors: [
              // 渐变颜色 leftGradientColor、rightGradientColor
              widget.beginGradientColor,
              widget.endGradientColor
            ],
          ), // 背景渐变
          // borderRadius 圆角的大小
          borderRadius: BorderRadius.circular(widget.borderRadius), // 90.0像素圆角
          boxShadow: [
            // 阴影
            BoxShadow(
              // 阴影颜色 shadowColor
              color: widget.shadowColor,
              // 阴影的大小 offsetX、offsetY
              offset: Offset(widget.offsetX, widget.offsetY),
              // 阴影的虚化效果大小
              blurRadius: widget.blurRadius,
            ),
          ],
        ),
        child: Padding(
          // paddingTop、paddingBottom、paddingLeft、paddingRight
          padding: EdgeInsets.fromLTRB(
            widget.paddingLeft,
            widget.paddingTop,
            widget.paddingRight,
            widget.paddingBottom,
          ),
          child: Center(
            child: Text(
              // 字体内容 text
              widget.text,
              style: TextStyle(
                // 字体颜色 textColor
                color: widget.textColor,
                // 字体大小 textSize
                fontSize: widget.textSize,
                // 字体粗细
                fontWeight: widget.fontWeight,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// 使用方法
Widget _LinearGradientButton(bool status, bool isLimit) {
  return LinearGradientButton(
    text: status ? '  已  报  名  ' : ' 立即报名 ',
    textSize: 14,
    fontWeight: FontWeight.w600,
    textColor: status ? MyColors.FF666666 : MyColors.FF56462C,
    beginGradientColor: status ? MyColors.FFE5E5E5 : MyColors.FFF3DBB6,
    endGradientColor: status ? MyColors.FFE5E5E5 : MyColors.FFCBA76D,
    onPressed: () {  },
  );
}
